<template>
	<div class="news_detail">
		<CustomTopAd :component="top_component" v-if="isShowDetailTopAd" />
		<BreadNav :channel="channelName" :channelAlias="channelAlias" :channelTitle="newsContent.channel" :channelId="newsContent.channelId" />
		<div class="news_detail_main">
			<h1 class="news_detail_title">{{newsContent.title}}</h1>
			<p class="news_detail_desc"><span>{{newsContent.media}}</span><span>{{newsContent.date}}</span></p>
			<article class="news_detail_content" :class="{'full_content':isShowFullNews}">
				<aside v-html="newsContent.content"></aside>
				<div class="news_detail_content_bottom"></div>
			</article>
			<a @click="showFullNews($event)" v-if="!isShowFullNews" class="more_news"><span>查看全文</span><i class="icon--6"></i></a>
			<div class="news_detail_share">
				<DownloadAppButton :newsTitle="newsContent.encodeTitle" :newsId="newsContent.id" :newsDate="newsContent.date" />
				<a @click="newsDetailShare($event)" class="news_detail_share_button"><i class="icon-uniE914"></i>分享</a>
			</div>
			<div class="qrcode_content">
				<div id='code'></div>
				<canvas id="canvas"></canvas>
				<span>扫描二维码，分享新闻</span>
			</div>
		</div>
		<ChannelItem :newstype="news" channelTitle="相关评论" type="comment" :newsTitle="newsContent.title" :newsDate="newsContent.date" :newsId="newsContent.id" />
		<ChannelItem :newstype="news" channelTitle="相关新闻" type="news" :newsListAd="detailNewsListAd" :newsId="newsContent.id" :channelTitle="newsContent.channel" :channelId="newsContent.channelId" :channelNewsCount="channelNewsCount" />
		<MoreChannels :channels="channels" />
		<Dialog :isShow="isShowDialog" :type="dialogType" :content="dialogMsg" />
		<Dialog :isShow="isShowShareDialog" type="shareDownDialog" :title="newsContent.title" :desc="newsContent.desc" :url="newsContent.url" :pic="newsContent.pic" @showShareDialogHandle="showShareDialogHandle" />
	</div>
</template>
<script>
	import MoreChannels from "../../components/common/more-channels.vue";
	import ChannelItem from "../../components/common/channel-item.vue";
	import BreadNav from "../../components/common/bread-nav.vue";
	import Dialog from "../../components/common/dialog.vue";
	import DownloadAppButton from "../../components/download-app/download-app-button.vue";
	import CustomTopAd from "../../components/ad/custom-top-ad.vue";
	import QRCode from 'qrcode';
	export default {
		name: "NewsDetail",
		props:["type", "channels"],
		data: function(){
			let channelName =this.getNewsChannel(this.$route.params.cid);
			return {
				top_component: r => require.ensure([], () => r(require('../../components/ad/top-ad.vue')), 'TopAd'),
				isShowDetailTopAd: this.$store.state.ad.detailTopAd,
				detailNewsListAd: this.$store.state.ad.detailNewsListAd,
				isShowFullNews:false,
				isShowDialog: false,
				isShowShareDialog: false,
				dialogType: 'tip',
				dialogMsg: '',
				newsContent:{},
				news:[this.$route.params.id],
				channelName:channelName && channelName.title || '',
				channelAlias: this.$route.params.alias,
				channelTitle: "",
				channelId:1,
				channelNewsCount: 10
			}
		},
		components:{
			MoreChannels,
			ChannelItem,
			BreadNav,
			QRCode,
			Dialog,
			DownloadAppButton,
			CustomTopAd
		},
		methods:{
			useqrcode(){
				var canvas = document.getElementById('canvas');
				QRCode.toCanvas(canvas, location.href, function (error) {
				  if (error) console.error(error)
				  //console.log('success!');
				})
			},
			showFullNews(){
				this.$set(this, "isShowFullNews", true);
			},
			newsDetailShare(e){
				this.$set(this, "isShowShareDialog", true);
			},
			showShareDialogHandle(args){
				this.$set(this, "isShowShareDialog", false);
			},
			getNewsChannel(cid){
				let channel = null;
				this.$store.state.channels().each((i, item) => {
					if (item.url.params && item.url.params.cid === parseFloat(cid)){
						channel = item;
						return false;
					}
				});
				return channel;
			},
			getNewsContent(){
				let that = this;
				that.$set(that, "isShowDialog", true);
				that.$set(that, "dialogType", 'tip');
				that.$set(that, "dialogMsg", "正在加载中...");
				let channel =this.getNewsChannel(this.$route.params.cid);
				//console.log(channel, this.$route.params.cid)
				that.$http.jsonp(this.$store.state.api.newsDetailApi.tmpl({
					id:that.$route.params.id,
					datetime:that.$route.params.datetime
				})).then(function(res){
					//console.log(res)
					that.$set(that, "newsContent", {
						title: res.body.data.title,
						date: res.body.data.date.split(' ')[0],
						media: res.body.data.media,
						content: res.body.data.content,
						id: that.$route.params.id,
						encodeTitle: encodeURIComponent(res.body.data.title),
						channel: channel && channel.title || "新闻",
						channelId: that.$route.params.cid,
						url: location.href,
						pic: res.body.data.matchpic,
						desc: res.body.data.abstract
					});
					that.$set(that, "channelName", res.body.data.title);
					that.$set(that, "isShowDialog", false);
				}, function(){
					
				});
			}
		},
		created: function(){
			//console.log(this.$route.params);
			this.$emit("upLocalData", [{
				name: "type",
				value: "newsDetail"
			},{
				name: "channelName",
				value: this.channelName
			}]);
			this.getNewsContent();
		},
		mounted(){
			this.useqrcode();
			window.scrollTo(1,1)
		},
		watch:{
			$route:function(to, from){
				this.getNewsContent();
				window.scrollTo(1,1);
				this.$set(this, "isShowFullNews", false);
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.news_detail{
		.news_detail_main{
			padding:20/@base;
			background-color: #fff;
			margin:10/@base 0 0 0;
			.news_detail_title{
				font-size:30/@base;
				font-weight: 400;
				padding:10/@base 0 20/@base 0;
			}
			.news_detail_desc{
				margin:10/@base 0 0;
				display:flex;
				font-size: 14/@base;
				color:#999;
				span{
					text-align: left;
					width:50%;
					&:last-child{
						margin-left: 10/@base;
						text-align: right;
					}
				}
			}
			.news_detail_content{
				padding:20/@base 0;
				font-size:24/@base;
				line-height: 40/@base;
				height:520/@base;
				overflow: hidden;
				position: relative;
				z-index: 1;
				div{
					text-indent: 0;
				}
				&.full_content{
					height: auto;
					overflow: initial;
					.news_detail_content_bottom{
						display:none;
					}
				}
				img{
					width:100%;
					margin:10/@base auto;
				}
				.news_detail_content_bottom{
					position: absolute;
					bottom:0;
					left:0;
					right:0;
					background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #ffffff);
					height:50/@base;
				}
			}
			.more_news{
				display:flex;
				width:130/@base;
				padding:20/@base 0;
				margin:0 auto;
				text-align: center;
				font-size: 24/@base;
				color:#999;
				span{
					width:99%;
				}
				i{
					vertical-align: middle;
					display:block;
					font-size: 12/@base;
					margin:10/@base auto 0 auto;
					color:#CC2020;
					font-weight: 700;
				}
			}
			.qrcode_content{
				text-align: center;
				canvas{
					margin:0 auto;
					display:block;
				}
				span{
					margin:0 auto;
					display:block;
					color:#999;
				}
			}
			.news_detail_share{
				display:flex;
				.download_app{
					width:70%;
				}
				.news_detail_share_button{
					width:30%;
					margin:20/@base 0 20/@base 10/@base;
					padding:10/@base 20/@base;
					background-color: #2e8b57;
					color:#fff;
					font-size:24/@base;
					border-radius: 5/@base;
					text-align: center;
					display: block;
					i{
						margin-right:10/@base;
						vertical-align: middle;
					}
				}
			}
		}
	}
</style>
